<template>
    <div class="star-wrapper" :class="starSize" >
      <span v-for="starCls in starClses" :class="starCls" class="item-class"></span>
    </div>
</template>

<script type="text/ecmascript-6">
    const LEN = 5
    const CLS_ON = 'on'
    const CLS_HALF = 'half'
    const CLS_OFF = 'off'

    export default {
      name: 'RatingBar',
      props: {
        size: {
          type: Number
        },
        score: {
          type: Number
        }
      },
      computed: {
        starSize () {
          return 'star-' + this.size
        },
        starClses () {
          let starCls = []
          let starOn = Math.floor(this.score * 2) / 2
          for (var i = 0; i < starOn; i++) {
            starCls.push(CLS_ON)
          }
          if (this.score % 1 !== 0) {
            starCls.push(CLS_HALF)
          }
          for (var n = starCls.length; n < LEN; n++) {
            starCls.push(CLS_OFF)
          }
          return starCls
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin.styl"
    .star-wrapper
      background-repeat :no-repeat
      margin :0 auto 0 auto
      .item-class
        display :inline-block
        background-repeat : no-repeat
      &.star-24
        width :66px
        height :10px
        .item-class
          width: 10px
          height :10px
          margin-right: 3px
          background-size :10px 10px
          &:last-child
            margin-right :0px
          &.on
            bg-image('star24_on')
          &.off
            bg-image('star24_off')
          &.half
            bg-image('star24_half')
      &.star-36
        width :100px
        height :12px
        .item-class
          width: 15px
          height :15px
          margin-right: 6px
          background-size :15px 15px
          &:last-child
            margin-right :0px
          &.on
            bg-image('star36_on')
          &.off
            bg-image('star36_off')
          &.half
            bg-image('star36_half')
      &.star-48
        width :182px
        height :12px
        .item-class
          width: 20px
          height :20px
          margin-right: 20px
          background-size :20px 20px
          background-repeat :no-repeat
          &:last-child
            margin-right :0px
          &.on
            bg-image('star48_on')
          &.off
            bg-image('star48_off')
          &.half
            bg-image('star48_half')

</style>
